<div style="padding: 5px;">
    <div class="toolSet">
        <div class="toolSetLeft">
            <!-- <p>Period:<nz-range-picker nzSize="default" style="margin-left: 0.1rem"></nz-range-picker></p> -->
            <div class="buttonSet">
                    <div class="table-buttons-left">
                        <!-- <div class="operate" (click)="refresh()"><i class="iconfont icon-refresh1"></i>{{'TrafficManagement.IncidentRecord.Refresh' | translate}}</div> -->
                        <button nz-button nzType="primary" (click)="refresh()" style="display: flex; align-items: center;"><i nz-icon nzType="reload" nzTheme="outline"></i>{{'TrafficManagement.IncidentRecord.Refresh' | translate}}</button>
                    </div>
                </div>
        </div>
        <div class="table-buttons-right">
            <itmp-toolbar 
            [accessButton]='accessButton'
            [toolbarList]="toolbarList" 
            [selectData]="selectedItem" 
            eventType="incident-position" 
            exportName="histScheduledEvent"
            [searchData]="queryData.condition"
            ></itmp-toolbar>
          </div>
    </div>
    <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" [nzFrontPagination]="false">
        <thead>
          <tr class="dataTitle">
            <th *ngFor="let item of renderHeader" class="listTitle">
              <div>{{'TrafficManagement.ScheduledEvent.' + item.name | translate}}</div>
              <div class="switch no-print" *ngIf="item.name==='Event ID'">
                <input style="width: 2rem" nz-input placeholder="" [(ngModel)]="id" (ngModelChange)="idSearch()" />
              </div>
              <div class="switch no-print" *ngIf="item.name==='Zone ID'">
                <input style="width: 1rem" nz-input placeholder="" [(ngModel)]="zoneId" (ngModelChange)="zoneSearch()" />
              </div>
              <div class="switch no-print" *ngIf="item.name==='Road Name'">
                <input style="width: 2rem" nz-input placeholder="" [(ngModel)]="roadName"
                  (ngModelChange)="filterSearch()" />
              </div>
              <div class="switch no-print" *ngIf="item.name==='Event Type'">
                <nz-select nzPlaceHolder="" style="width: 1.2rem" nzAllowClear [(ngModel)]="typeSelect"  [nzDropdownMatchSelectWidth]="false"
                  (ngModelChange)='typeSearch()' [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear>
                  <nz-option *ngFor="let option of hsEventData" [nzValue]="option.value" [nzLabel]="'TrafficManagement.ScheduledEvent.'+option.name|translate">
                  </nz-option>
                </nz-select>
              </div>
              <div class="switch no-print" *ngIf="item.name==='Planned Start Date'">
                <nz-range-picker style="width: 2rem" nzSize="default" [(ngModel)]="dateRange" 
                (ngModelChange)="onChange($event)"></nz-range-picker>
              </div>
              <div class="switch no-print" *ngIf="item.name==='Planned End Date'">
                <nz-range-picker style="width: 2rem" nzSize="default" [(ngModel)]="dateUpRange" 
                (ngModelChange)="onUpdateChange($event)"></nz-range-picker>
              </div>
              <div class="switch no-print" *ngIf="item.name==='Status'">
                <nz-select nzPlaceHolder="" style="width: 1rem" nzAllowClear [(ngModel)]="statusSelect"  [nzDropdownMatchSelectWidth]="false"
                  (ngModelChange)='statusSearch()' [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear>
                  <nz-option *ngFor="let option of hsStatusData" [nzValue]="option.value" [nzLabel]="'TrafficManagement.ScheduledEvent.'+option.name|translate">
                  </nz-option>
                </nz-select>
              </div>
              <div class="switch no-print" *ngIf="item.name==='LaneBlockage'">
                <div style="width: 1rem;height: 0.32rem"></div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="dataList">
          <tr *ngFor="let data of basicTable.data;index as i" (click)="showDetail(data)">
            <td>{{ data.eventId }}</td>
            <td>{{ ('TrafficManagement.ScheduledEvent.'+(typeList&&typeList[data.type])) |translate}}</td>
            <td>{{ data.planStartTime | date:'yyyy/MM/dd HH:mm' }}</td>
            <td>{{ data.planEndTime | date:'yyyy/MM/dd HH:mm' }}</td>
            <td>{{ data.zone_ID }}</td>
            <td>{{ data.road_Name }}</td>
            <td>
              <span *ngFor="let data of data.laneBlockage">
                <img class="img-lane" [src]="data&&('../content/images/icons/' + lane_blockages[data])" style="width: 20px;">
              </span>
            </td>
            <td>{{ ('TrafficManagement.ScheduledEvent.'+(statusList&&statusList[data.veri_State])) |translate}}</td>
          </tr>
        </tbody>
        <tfoot class="pagination history-event-list">
          <tr>
            <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
              <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
                [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
                (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
            </td>
          </tr>
        </tfoot>
      </nz-table>
</div>
